<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset='utf-8'>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<script src="${ctx}/static/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="${ctx}/static/js/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
<link href="${ctx}/static/js/My97DatePicker/skin/WdatePicker.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/static/css/pager.css" rel="stylesheet" type="text/css" />
<style type="text/css">
table{border:1px solid #F00} 
#table-6 thead th {
background-color: rgb(128, 102, 160);
color: #fff;
border-bottom-width: 0;
}

/* Column Style */
#table-6 td {
color: #000;
}
/* Heading and Column Style */
#table-6 tr, #table-6 th {
border-width: 1px;
border-style: solid;
border-color: rgb(128, 102, 160);
border:1px solid #F00;
}

/* Padding and font style */
#table-6 td, #table-6 th {
padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
font-weight: bold ;
border:1px solid #F00;
}
</style>
</head>
<body style="padding:20px">
	<h1>短信管理系统</h1>
	<div style="margin-top: 20px">
		状态： <select name="status" id="status">
			<option value="">--请选择--</option>
			<option value="1" ${query.status==1?'selected':''}>待发</option>
			<option value="2" ${query.status==2?'selected':''}>发送中</option>
			<option value="3" ${query.status==3?'selected':''}>成功</option>
			<option value="4" ${query.status==4?'selected':''}>失败</option>
		</select> 手机号:<input type="text" value="${query.mp}" name="mp" id="mp" /> 创建时间: <input type="text" class="form-control"
			value="<fmt:formatDate value="${query.sendTime_s}" type="both" pattern="yyyy-MM-dd HH:mm:ss"/>" name="sendTime_s" id="sendTime_s" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" /> ~ <input
			type="text" class="form-control" value="<fmt:formatDate value="${query.sendTime_e}" type="both" pattern="yyyy-MM-dd HH:mm:ss"/>" name="sendTime_e" id="sendTime_e"
			onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" />
	<input type="button" value="查询" onclick="search(0)" style="width:50px;color:blue;margin-left:10px"/>
	<input type="button" value="新增" onclick="location.href='add.jsp'" style="width:50px;color:blue;margin-left:10px"/>
	</div>
	
	<div style="width:800px;margin-top: 20px">
	<table id="table-6" style="width: 100%">
		<thead>
			<tr>
				<th>#</th>
				<th>手机号</th>
				<th>短信内容</th>
				<th>创建时间</th>
				<th>发送时间</th>
				<th>短信状态</th>
				<th>删除</th>
			</tr>
		</thead>
		<tbody>
			<c:forEach var="item" items="${page.list}" varStatus="status">
				<tr id="_${item.id}">
					<td class="num">${status.index+1}</td>
					<td>${item.mp}</td>
					<td width="20%">${item.content}</td>
					<td><fmt:formatDate value="${item.createTime}" type="both" pattern="yyyy-MM-dd HH:mm:ss" /></td>
					<td><fmt:formatDate value="${item.sendTime}" type="both" pattern="yyyy-MM-dd HH:mm:ss" /></td>
					<td><c:if test="${item.status==1}">待发</c:if> <c:if test="${item.status==2}">发送中</c:if> <c:if test="${item.status==3}">成功</c:if> <c:if test="${item.status==4}">失败</c:if></td>
					<td><a href="javascript:" onclick="del(${item.id})">删除</a></td>
				</tr>
			</c:forEach>
		</tbody>
	</table>
	<div style="width: 100%; margin-top: 10px">
		<div style="float: left; width: 40%">总记录数： ${page.total}条 页次：${page.pageNum}/${page.pages}页 每页条数：${page.pageSize}条</div>
		<div style="float: left;">
			<ul  id="pagination-flickr">
					<li><a title="首页" href="javascript:search(1)">首页</a></li>
					<li class="previous" ><a title="上页"  href="javascript:search(${page.prePage})">上页</a></li>
				<c:forEach items="${page.navigatepageNums}" var="nav">
					<c:if test="${nav == page.pageNum}">
						<li clas="active" ><a title="第${nav}页" href="javascript:">${nav}</a></li>
					</c:if>
					<c:if test="${nav != page.pageNum}">
						<li><a title="第${nav}页" href="javascript:search(${nav})">${nav}</a></li>
					</c:if>
				</c:forEach>
					<li class="next" ><a title="下页" href="javascript:search(${page.nextPage})">下页</a></li>
			</ul>
		</div>
	</div>
	
	</div>
</body>


<script type="text/javascript">
function del(id) {
	if(confirm("确定要删除这条数据吗？")){
		location.href = "${ctx}/del.do?id="+id;
	}
}
function search(pageNum) {
	var url = "list?pageSize=${page.pageSize}&s="+Math.floor(Math.random()*1000+1);;
	if(pageNum>0)
		url+="&pageNum="+pageNum;
	if($("#status").val())
		url+='&status='+$("#status").val();
	if($("#mp").val())
		url+='&mp='+$("#mp").val();
	if($("#sendTime_s").val())
		url+='&sendTime_s='+$("#sendTime_s").val();
	if($("#sendTime_e").val())
		url+='&sendTime_e='+$("#sendTime_e").val();
	location.href = url;
}
	</script>